var oUl = '<ul></ul>';
$('.left').html(oUl);
for (var i in JSON.parse(titles)) {
    var oLi = '<li onclick="getData(this)"><img src="images/kuaijin.png"><a>' + JSON.parse(titles)[i] + '</a></li>';
    $('.left ul').append(oLi);
}

function getData(object) {
    $('.right').empty();
    $('.right').append('<div class="chart1"></div>');
    var text = $(object).text();
    var data = {
        text: text
    };
    $.ajax({
        type: "POST",
        url: '/analysis/conditions',
        data: data,
        success: function (data) {
            console.log(data.data[0]);
            var title = data.data[0]['标题'];
            var bumen = data.data[0]['分析部门'];
            var month = data.data[0]['月份'];
            var data1 = JSON.parse(data.data[0]['数据']);
            console.log(data1)

            var bumens = [];
            // 部门数组
            if (bumen.indexOf("、") != -1) {
                bumens = bumen.split('、');
            } else{
                bumens.push(bumen);
            }

            // 月份数组
            var months = [];
            month.substr(1).replace(/\d+/g, function () {
                for (let i = 1; i <= arguments[0]; i++) {
                    months.push(i + "月");
                }
            });

            function object(name, data) {
                return {
                    name:name,
                    type:'line',
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    },
                    smooth: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    data:data
                }
            }
            // 遍历部门和对应的数据
            var datas = [];
            for (var i in bumens) {
                datas.push(object(bumens[i],data1[i]))
            }
            console.log(datas)

            //折线图
            echarts.init(document.getElementsByClassName("chart1")[0],'light').setOption({
                // 标题
                title: {
                    text: title
                },
                // 显示数据
                tooltip: {
                    trigger: 'axis'
                },
                // 图例,控制数据是否显示
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: -5,
                    top: 30,
                    bottom: 20,
                    data: bumens
                },
                // 这个dataZoom组件，默认控制x轴。
                dataZoom: [
                    {
                        type: 'slider',// 显示x轴滚动条
                        xAxisIndex: 0,// 这个是控制x轴
                        start: 0,// 滚动条开始位置
                        end: 50// 滚动条结束为止
                    },
                    {
                        type: 'inside',// 可以用鼠标滑轮控制x轴滚动条
                        xAxisIndex: 0,
                        start: 0,
                        end: 50
                    },
                ],
                grid: {
                    left: '3%',
                    right: '12%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                // x轴图形滚动条
                xAxis : [
                    {
                        splitLine: {show: false},// 网格线（默认：false没有）
                        type : 'category',
                        boundaryGap : false,
                        data : months
                    }
                ],
                // y轴图形滚动条
                yAxis : [
                    {
                        name: '(万元)',
                        type : 'value'
                    }
                ],
                series : datas
            })
        }
    })
}


//
// // //柱状图
// // echarts.init(document.getElementsByClassName("chart1")[0],'light').setOption({
// //     // 图形标题
// //     title:{
// //         text: "1-2级巴-经营利润"
// //     },
// //
// //     tooltip:{},
// //     // 控制数据是否显示
// //     legend:{
// //         data: ["2017年1-6月份","2018年1-6月份"]
// //     },
// //     // x轴图形滚动条
// //     xAxis: {
// //         type: 'category',
// //         data: ['金石物流', '经营管理中心', '物流发展事业部', '物流装备事业部', '总部管理费用']
// //     },
// //     // y轴图形滚动条
// //     yAxis: {},
// //     // 这个dataZoom组件，默认控制x轴。
// //     dataZoom: [
// //         {
// //             type: 'slider',// 显示x轴滚动条
// //             xAxisIndex: 0,// 这个是控制x轴
// //             start: 0,// 滚动条开始位置
// //             end: 50// 滚动条结束为止
// //         },
// //         {
// //             type: 'inside',// 可以用鼠标滑轮控制x轴滚动条
// //             xAxisIndex: 0,
// //             start: 0,
// //             end: 50
// //         }
// //     ],
// //     series: [
// //         {
// //             type: 'bar',
// //             name: '2017年1-6月份',
// //             data: [323.64, -103.5, 507.67, -80.52, 22.54]
// //         },
// //         {
// //             type: 'bar',
// //             name: '2018年1-6月份',
// //             data: [920.12, 644.5, 311.58, -35.97, 42.82]
// //         }
// //     ]
// // });
//
// //        //饼状图
// //        echarts.init(document.getElementsByClassName('chart2')[0],'light').setOption({
// //            title:{
// //                text: "饼状图"
// //            },
// //            legend:{
// //                data: ["视频广告","联盟广告","邮件营销","直接访问","搜索引擎"]
// //            },
// //            series: {
// //                name: '访问来源',
// //                type: 'pie',
// //                roseType: 'angle',
// //                radius: '55%',
// //                data:[
// //                    {value:235, name:'视频广告'},
// //                    {value:274, name:'联盟广告'},
// //                    {
// //                        value:310,
// //                        name:'邮件营销',
// //                        itemStyle:{
// //                            color:"#0000ff"
// //                        }
// //                    },
// //                    {value:335, name:'直接访问'},
// //                    {value:400, name:'搜索引擎'}
// //                ]
// //            }
// //        });
//
